@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/public.css')}}">
@section('content')
<div class="mainHrContent" id="hrAddressAdd">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.hrmy.hrIndex') }}">用户中心</a>
                > 收货地址
            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.hrmy.menu')
        <div class="basicInfo" id="hrAddressAdds">
            <div class="basicInfo_title" v-if="addrId==''">
                <span></span>
                新增地址
            </div>
            <div class="basicInfo_title" v-else>
                <span></span>
                修改地址
            </div>
            <div class="userDetails">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item prop="name">
                        <p>
                            <span class="details_title">收货人：</span>
                            <el-input v-model="form.name"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item prop="area">
                        <p>
                            <span class="details_title">所在地区：</span>
                            <el-cascader @change="areaChange" size="mini" :options="areaArr" v-model="form.area"></el-cascader>
                        </p>
                    </el-form-item>
                    <el-form-item prop="addrs">
                        <p>
                            <span class="details_title">详细地址：</span>
                            <el-input v-model="form.addrs"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item prop="tel">
                        <p>
                            <span class="details_title">联系电话：</span>
                            <el-input v-model="form.tel"></el-input>
                        </p>
                    </el-form-item>
                </el-form>
                <button @click="submit('ruleForm')">保存</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrAddressAdd = new Vue({
            el: '#hrAddressAdds',
            data: () => {
                return {
                    addrId: getQueryString("addrId") || '',
                    form: {
                        name: '',
                        area: [],
                        addrs: '',
                        tel: '',
                        province: '',
                        city: '',
                        region: '',
                    },
                    areaArr: [],
                    rules: {
                        tel: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        name: [{
                            required: true,
                            message: '收货人不能为空',
                            trigger: 'blur'
                        }],
                        area: [{
                            required: true,
                            message: '所在地区不能为空',
                            trigger: 'blur'
                        }],
                        addrs: [{
                            required: true,
                            message: '详细地址不能为空',
                            trigger: 'blur'
                        }],
                    },

                }
            },
            created() {
                if (getQueryString("addrId")) {
                    this.getDetils();
                };
                let data = {};
                apiAjax("{{ route('home.public.regions')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.areaArr = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                getDetils() {
                    let data = {
                        address_id: this.addrId,
                    };
                    apiAjax("{{ route('home.user.hrAddressDetailsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.form.addrs = res.data.detail;
                            this.form.name = res.data.realname;
                            this.form.tel = res.data.phone;
                            this.form.area.push(res.data.province);
                            this.form.area.push(res.data.city);
                            this.form.area.push(res.data.region);
                            this.form.province = res.data.province;
                            this.form.city = res.data.city;
                            this.form.region = res.data.region;
                            console.log(this.form.area);

                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                areaChange(value) {
                    this.form.province = value[0] || '';
                    this.form.city = value[1] || '';
                    this.form.region = value[2] || '';
                },
                submit(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (getQueryString("addrId")) {
                                this.updateDetails();
                            } else {
                                this.addDetails();
                            }
                        } else {
                            return false;
                        }
                    });
                },
                updateDetails() {
                    let data = {
                        address_id: this.addrId,
                        realname: this.form.name,
                        phone: this.form.tel,
                        province: this.form.province,
                        city: this.form.city,
                        region: this.form.region,
                        detail: this.form.addrs,
                    }
                    apiAjax("{{ route('home.user.hrAddressEditApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            window.location.href = "{{ route('home.hrmy.hrAddress') }}";
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                addDetails() {
                    let data = {
                        address_id: "",
                        realname: this.form.name,
                        phone: this.form.tel,
                        province: this.form.province,
                        city: this.form.city,
                        region: this.form.region,
                        detail: this.form.addrs,
                    }
                    apiAjax("{{ route('home.user.hrAddressEditApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            window.location.href = "{{ route('home.hrmy.hrAddress') }}";
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
            }
        })
    })
</script>
@endsection